<template>
	<view>
		<h-dig :showMenu="isShow"></h-dig>
		<view class="mid-box">
			<image src="../../static/chahua.png" mode="widthFix"></image>
			<!-- <view class="mid-btn" @click="popTan">点击扫码入库</view> -->
		</view>
		<view class="buttom-box">
			<view class="title-box">
				<view class="left">
					入库列表
				</view>
				<view class="right">
					<view class="b-btn" @click="submitData">
						<text class="icon">&#xe62d;</text>
						<text class="text">入库</text>
					</view>
				</view>
			</view>
			<view class="conten-list">
				<scroll-view scroll-y scroll-with-animation :style="{'height':list.length>4?'35vh':''}">
					<view class="item-box" v-for="(item,index) in list" :key="index">
						<text class="name">{{item.name}}</text>
						<text class="sku">sku：{{item.sku_code}}</text>
						<view class="counter-box">
							<uni-number-box
								ref="number"
								class="step"
								:min="1"
								:value="item.number"
								:isMin="item.number"
								@reducesValue = "reducesValue($event,index)"
								@change="numberChange($event,index)"								
							></uni-number-box>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!--  -->
		<uni-popup style="z-index: 100;" :isShow="true" ref="popTan" type="center">
			<view class="pop-box">
				<view class="title">提示</view>
				<view class="conten">商品不存在，请检查</view>
				<view class="pop-btn-group">
					<view class="submit" @click="comfTan">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import hDig from '@/components/h-dig.vue'
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue"
// #ifndef APP-PLUS
// #endif
import { Net, DATA, SOURCE } from '../../utils/scanCode.js';
var main, receiver, filter;
var _codeQueryTag = false;
export default {
	components: {uniNumberBox,hDig,uniPopup,ypNumberBox},
	data() {
		return {
			skuCode:'',
			list:[
				
			],
			isShow:false
		};
	},
	onLoad() {
		this.initScan()
	},
	onShow() {
		this.isShow = false
		this.startScan()
	},
	onHide() {
		this.stopScan()
	},
	// onNavigationBarButtonTap(e){
	// 	this.isShow = !this.isShow
	// },
	onNavigationBarButtonTap(e){
		console.log(e)
		switch (e.index){
			case 0:
				this.goHis()
				break;
			case 1:
				this.isShow = !this.isShow
				break;
			default:
				break;
		}  
	},
	watch:{
		'list':{
			handler:function(newVal,oldVal){
				// newVal.map((item,index)=>{
				// 	if(item.number==0){
				// 		this.list.splice(index,1)
				// 		this.$forceUpdate()
				// 	}
				// })
				console.log(newVal,'-----------')
				// that.list.splice(that.list.findIndex((item,index) => index === index), 1)
			},
			deep:true
			// if(that.list[index].number < 1){
			// 	that.list.splice(that.list.findIndex((item,index) => index === index), 1)
			// 	// that.list.filter(v=>v.index!==index)
			// 	// that.list.splice(index,1)
			// }
		},
	},
	methods:{
		goHis(){
			uni.navigateTo({
				url:'history/history'
			})
		},
		// 扫码头
		initScan() {
			let _this = this;
			/* #ifdef APP-PLUS */
			main = plus.android.runtimeMainActivity(); //获取activity
			var IntentFilter = plus.android.importClass('android.content.IntentFilter');
			filter = new IntentFilter();
			filter.addAction(Net);
			receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
				onReceive(context, intent) {
					plus.android.importClass(intent);
					let code = intent.getStringExtra(DATA);
					let arrCode = intent.getByteArrayExtra(SOURCE);
					_this.queryCode(code);
				}
			});
			/* #endif */
		},
		startScan() {
			/* #ifdef APP-PLUS */
			main.registerReceiver(receiver, filter);
			/* #endif */
		},
		stopScan() {
			/* #ifdef APP-PLUS */
			main.unregisterReceiver(receiver);
			/* #endif */
		},
		queryCode(code) {
			let that = this
			//防重复
			if (_codeQueryTag) return false;
			_codeQueryTag = true;
			setTimeout(function() {
				_codeQueryTag = false;
			}, 150);
			//到这里扫描成功了，可以调用自己的业务逻辑，code就是扫描的结果
			that.skuCode = code
			setTimeout(()=>{
				that.getAddGoods()
			},500)
		},
		// -----------------------------------
		
		
		mskClose(e){
			console.log(e)
		},
		goScan(){
			let that = this
			uni.scanCode({
			    onlyFromCamera: true,
			    success: function (res) {
					if(res.result){
						that.skuCode = res.result
						that.getAddGoods()
					}
			    }
			});
		},
		getAddGoods(){
			let that = this
			that.$api.getBreakageGoods({sku_code:that.skuCode}).then(res=>{
				if(res.data.code==1){
					that.$tools.msg(res.data.msg)
					let filt = that.list.filter(item=>{
						if(item.sku_code == res.data.data.sku_code){
							return item.number++
						}
					})
					if(filt.length==0){
						that.list.push({...res.data.data,number:1})
					}
				}else{
					// that.$tools.msg(res.data.msg,'测试一下')
					that.popTan()
					// uni.showModal({
					// 	title:'提示',
					// 	content:res.data.msg,
					// 	success:(res1)=>{
					// 		if(res1.confirm){
					// 			console.log('用户点击确定');
					// 		}else if(res1.cancel){
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// })
					// uni.showToast({
					// 	icon:'none', 
					// 	title:res.data.msg,
					// 	duration:2000
					// })
				} 
				that.$forceUpdate()
			}).catch(err=>{
				console.log(err)
			})
		},
		// 入库事件
		submitData(){
			if(!this.list.length){
				this.$tools.msg('没有入库商品')
				return false 
			} 
			let param = []
			this.list.map(item=>{
				param.push({name:item.name,num:item.number,sku_code:item.sku_code})
			})
			this.$api.submitRuku({array:param}).then(res=>{
				if(res.data.code==1){
					this.$tools.msg(res.data.msg)
					this.list = []
					setTimeout(()=>{
						this.$tools.switchGo('../category/category')
					},500)
				}else{
					this.$tools.msg(res.data.msg)
				}
			})
		},
		//数量
		numberChange(e,index){
			let that = this
			that.list[index].number = e;
		},
		// 减少
		reducesValue(e,index){
			if(this.list[index].number <= 1){
				this.list.splice(index,1)
			}
		},
		
		popTan(){
			this.$refs.popTan.open();
		},
		comfTan(){
			this.$refs.popTan.close();
		},
	}
};
</script>

<style lang="less" scoped>
page {
	background: #fafafa;
}
.mid-box {
	width: 100%;
	height: 55vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image{
		width: 290upx;
	}
	.mid-btn{
		width: 200upx;
		height: 54upx;
		line-height: 54upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFFFF;
		font-weight: bold;
		background: #14D9B4;
		border-radius: 27upx;
	}
}
.buttom-box{
	width: 100%;
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: #FFFFFF;
	padding: 20upx 0;
	.title-box{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #f2f2f2;
		position: relative;
		.left,.right{
			flex: 1;
			font-size: 24upx;
		}
		.left{
			padding-left: 50upx;
			color: #333333;
		}
		.right{
			flex: 0.5;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding-right: 30upx;
			.b-btn{
				width: 145upx;
				height: 45upx;
				border-radius: 23upx;
				background: #14D9B4;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.icon{
					font-size: 36upx;
					color: #FFFFFF;
				}
				.text{
					padding-left: 6upx;
					color: #FFFFFF;
				}
			}
		}
		
	}
	.title-box::after{
		width: 100upx;
		height: 4upx;
		background: #21E6C1;
		position: absolute;
		content: '';
		left: 50upx;
		bottom: 0;
	}
	.conten-list{
		width: 630upx;
		padding: 15upx 0 0 50upx;
		display: flex;
		flex-direction: column;
		.item-box{
			width: 100%;
			padding: 23upx 0;
			border-bottom: 1upx dashed #f2f2f2;
			display: flex;
			flex-direction: column;
			position: relative;
			.name{
				font-size: 24upx;
				color: #666666;
				padding-bottom: 10upx;
			}
			.sku{
				font-size: 20upx;
				color: #999999;
			}
			.counter-box{
				position: absolute;
				right: 0upx;
				top: 45%;
				display: flex;
				flex-direction: row;
				align-items: center;
				text{
					font-size: 40upx;
					color: #666666;
				}
				.number{
					font-size: 24upx;
					padding: 0 20upx;
				}
			}
		}
		.item-box:last-child{
			border:0
		}
	}
}
.pop-box {
	width: 630upx;
	background: #ffffff;
	border-radius: 17upx;
	padding: 30upx 0;
	display: flex;
	flex-direction: column;
	position: relative;
	.title {
		position: relative;
		width: 100%;
		text-align: center;
		font-size: 27upx;
		color: #333333;
		font-weight: bold;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #f2f2f2;
	}
	.title::after {
		position: absolute;
		content: '';
		width: 100upx;
		height: 7upx;
		background: #21e6c1;
		bottom: 0;
		left: 50%;
		margin-left: -50upx;
	}
	.conten {
		padding: 30upx 0 20upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #555555;
		font-size: 24upx;
		textarea {
			padding: 20upx;
			font-size: 24upx;
			background: #f7f7f7;
		}
	}
	.pop-info {
		width: calc(100% - 80upx);
		padding: 30upx 40upx 25upx;
		display: flex;
		flex-direction: column;
		position: relative;
		.info-top {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			text {
				flex: 2;
				font-size: 24upx;
				color: #cccccc;
			}
			text:last-child {
				flex: 1;
				text-align: right;
				font-size: 20upx;
				color: #666666;
			}
		}
		.order {
			font-size: 24upx;
			color: #333333;
			padding: 15upx 0;
		}
		.time {
			font-size: 24upx;
			color: #666;
			text {
				color: #e69021;
			}
		}
		.scan {
			position: absolute;
			background: #21e6c1;
			bottom: 16upx;
			right: 40upx;
			color: #ffffff;
			border-radius: 10upx;
			padding: 5upx;
		}
	}
	.pop-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		.pop-content-tit {
			width: calc(100% - 80upx);
			padding: 0 40upx;
			height: 50upx;
			line-height: 50upx;
			background: #f9f9f9;
			font-size: 24upx;
			color: #555555;
			display: flex;
			flex-direction: row;
			align-items: center;
			text {
				flex: 1;
			}
			text:last-child {
				text-align: right;
			}
		}
		.cont-item {
			width: calc(100% - 80upx);
			padding: 20upx 40upx;
			display: flex;
			flex-direction: column;
			.item-1 {
				width: 100%;
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 20upx 0;
				border-bottom: 1upx solid #f2f2f2;
				.name {
					font-size: 24upx;
					color: #666666;
				}
				.sku {
					font-size: 20upx;
					color: #999999;
					padding-top: 10upx;
				}
				.number {
					position: absolute;
					right: 0;
					top: 40%;
					font-size: 24upx;
					color: #666666;
				}
			}
		}
	}
	.pop-btn-group {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 20upx;
		.cancel {
			color: #666666 !important;
			background: #f2f2f2 !important;
		}
		.submit,
		.cancel {
			margin: 0 10upx;
			height: 50upx;
			line-height: 50upx;
			font-size: 24upx;
			color: #ffffff;
			padding: 0 30upx;
			border-radius: 7upx;
			background: #21e6c1;
		}
	}
}
</style>
